<template>
  <div class="shop">
    <my-header title="会员购" :back="false"></my-header>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        placeholder="按回车搜索关键词"
        shape="round"
        :clearable="false"
        show-action
        @search="onSearch"
        @cancel="onCancel"
        action-text="取消"
      />

      <!-- 搜索结果列表 -->
      <van-popup v-model="show" round :style="{ height: '70%', width: '80%' }">
        <van-cell title="搜索结果" icon="fire-o" color="#ee0a24" />
        <van-cell
          :title="item2.name"
          v-for="(item2, index2) in searchRes"
          :key="index2"
          class="a"
        />
      </van-popup>

      <!-- grids -->
      <div class="grids">
        <van-grid>
          <van-grid-item v-for="(l, i) in grids" :key="i">
            <van-image :src="l.imageUrl" />
            <span class="name">{{ l.name }}</span>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 商品列表 -->
      <div class="goodList">
        <div
          class="goodwrap"
          v-for="(item, index) in lists"
          :key="index"
          @click="toDetail(item.itemsId)"
        >
          <div class="img">
            <img v-if="item.imageUrls" :src="item.imageUrls[0]" alt="" />
          </div>
          <div class="info">
            <p class="title">{{ item.title }}</p>
            <div v-if="item.priceDesc" class="price">
              <span class="sym">￥</span
              ><span class="count">{{ item.priceDesc[0] }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      grids: [],
      lists: [],
      //   搜索框
      value: "",

      isLoading: false,

      // 搜索结果数据集
      searchRes: [],

      // 控制搜索结果弹出层的显示
      show: false,
    };
  },
  methods: {
    // 搜索回车事件
    async onSearch(value) {
      console.log(value);
      if (value) {
        let res = await this.$ajax.getSearchData({
          term: this.value,
          type: 1,
          platform: "h5",
        });
        // console.log(res);
        this.searchRes = res.data.vo;
        console.log(this.searchRes);
        this.show = true;
      }
    },

    onCancel() {
      Toast("取消");
      // this.searchRes = [];
      this.show = false;
    },

    // 下拉刷新事件
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    //   获取商品列表
    async getShopList() {
      let res = this.$ajax.getShopListData().then((res) => {
        console.log(res.data.vo.list);
        this.lists = res.data.vo.list;
      });
    },
    // 获取grids
    async getGrids() {
      let res = this.$ajax
        .getShopGridData({ channel: 3, sourceType: 3 })
        .then((res) => {
          this.grids = res.data.vo.tabs;
        });
    },
    toDetail(id) {
      console.log(id);
      this.$router.push({ name: "detail", query: { itemsId: id } });
    },

    // 判断是否有params的searchValue值，有就是从分类页跳转过来的
    // 将searchValue值填充到搜索框里
    hasSearchValue() {
      if (this.$route.params) {
        this.value = this.$route.params.searchValue;
      }
    },
  },
  mounted() {
    this.getShopList();
    this.getGrids();
    console.log(this.searchRes);
    // console.log(this.value);
    console.log(this.$route.params);

    this.hasSearchValue();
  },
};
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 15px;
  padding-bottom: 46px;
  ::v-deep .van-cell.a {
    border-bottom: 1px solid plum;
  }
  .resList {
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    padding: 0 15px 0 15px;
    border: 1px solid #eee;
  }
  .grids {
    ::v-deep .van-image__img {
      width: 40px;
    }
  }
  .goodList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .goodwrap {
      margin: 10px 0 10px;
      width: 166px;
      height: 250px;
      //   border: 1px solid;
      border-radius: 15px;
      //   background: #f2f2f2;
      box-shadow: 0px 0px 8px #ccc;
      .img {
        img {
          width: 160px;
          height: 166px;
          border-radius: 15px;
        }
      }
      .info {
        .title {
          padding: 0 5px;
          margin-top: 10px;
          font-size: 14px;
          height: 40px;
          overflow: hidden;
        }
        .price {
          padding: 0 5px;
          .sym {
            color: #f40;
          }
          //   .count{

          //   }
        }
      }
    }
  }
}
</style>